<template>
  <div class="mindtree">
    <div class="node-element"
      v-for="(item, index) in dataList"
      :key="item._id"
      >
      <div class="node-element-prefix">
      </div>
      <div class="node-element-content">
        <div class="line" v-if="item.children?.length" :style="{ top: 24 + (item.imageInfo?.height ? item.imageInfo.height + 6 : 0) + 'px' }"></div>
        <div class="node-element__image"
           v-if="item.imageInfo"
           :style="{ marginLeft: item.children?.length ? '48px' : '42px' }">
          <img :src="item.imageInfo.url" alt="" :style="{ width: item.imageInfo.width + 'px', height: item.imageInfo.height + 'px' }">
        </div>
        <div class="node-element-data">
          <i class="ri-draggable" v-if="depth > 0"></i>
          <i
            class="fold-icon ri-arrow-down-s-fill"
            :class="{ hidden: !item.children?.length, fold: !unFoldIds.includes(item._id) }"
            @click="handleFoldChildNode(item._id)"></i>
          <em class="circle"></em>
          <div class="node-element-data__markers">
            <div
              class="mark"
              v-for="(itemName, idx) in item.marks"
              :key="itemName.icon"
              :style="{ left: `${idx * 12}px`, height: '18px' }">
              <svg width="18" height="18" >
                <use :xlink:href="`#${itemName.icon}`" />
              </svg>
            </div>
          </div>
          <div class="node-element-data__label" :style="{ 'padding-left': `${item.marks?.length * 12 + 8}px` }">
            <div class="topic-serial-number" v-if="parent?.['child-serial']">{{ generateSerialNumber(parent['child-serial'], index) }}</div>
            <div
              class="topic-text"
              @blur="handleTopicTextUpdate($event, item)"
              contenteditable="true">{{ item.text }}</div>
            <div class="latex-span" v-if="item.latex" v-html="getLatexHtmlString(item.latex)"></div>
          </div>
        </div>
        <div
          class="node-element-child"
          v-if="item.children?.length"
          :style="{ paddingLeft: '24px', height: !unFoldIds.includes(item._id) ? 'auto' : 0 }">
          <Tree :dataList="item.children" :parent="item" :depth="depth + 1" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, defineComponent } from 'vue'
import sequence from '../utils/serialNumber'
import { getLatexHtmlString } from '../utils/katex'

export default defineComponent({
  name: 'Tree',
  props: {
    dataList: {
      type: Array,
      default: () => []
    },
    depth: {
      type: Number,
      default: 0
    },
    parent: {
      type: Object,
      default: () => null
    }
  },
  setup () {
    const unFoldIds = ref([])

    function handleFoldChildNode (id) {
      const idx = unFoldIds.value.findIndex(o => o === id)
      if (idx === -1) {
        unFoldIds.value.push(id)
      } else {
        unFoldIds.value.splice(idx, 1)
      }
    }

    function handleTopicTextUpdate (event, item) {
      item.text = event.target.innerText
    }

    function generateSerialNumber (childSerialType, idx) {
      const childSerialTypeSplit = childSerialType.split('-')
      return sequence[childSerialTypeSplit[0]](idx + 1, childSerialTypeSplit[1])
    }

    return {
      unFoldIds,
      generateSerialNumber,
      handleFoldChildNode,
      handleTopicTextUpdate,
      getLatexHtmlString
    }
  }
})
</script>

<style lang="scss" scoped>
.node-element {
  margin-top: 4px;
  display: flex;
  .node-element-content {
    flex: 1;
    position: relative;
    .line {
      width: 1px;
      position: absolute;
      top: 24px;
      bottom: 14px;
      left: 28px;
      background-color: #ebebeb;
    }
    .node-element__image {
      font-size: 0;
      border: 1px solid transparent;
      border-radius: 4px;
      padding: 2px;
      display: inline-block;
      &:hover {
        border-color: #f1f1f1;
      }
    }
    .node-element-data {
      display: flex;
      align-items: center;
      padding: 4px;
      position: relative;
      border-radius: 4px;
      .ri-draggable {
        font-size: 16px;
        color: #000;
        opacity: 0;
        pointer-events: none;
      }
      .fold-icon {
        font-size: 16px;
        color: #999;
        transition: 0.3;
        transform: rotate(-90deg);
        &.fold {
          transform: rotate(0deg);
        }
        &.hidden {
          opacity: 0;
          pointer-events: none;
        }
      }
      .circle {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: #666;
        margin-right: 8px;
        margin-left: 4px;
      }
      .node-element-data__markers {
        display: flex;
        align-items: center;
        position: relative;
        .mark {
          position: absolute;
          background: #fff;
          border-radius: 50%;
        }
      }
      .node-element-data__label {
        color: #4c4c4c;
        line-height: 22px;
        font-size: 14px;
        flex: 1;
        width: 0;
        display: flex;
        align-items: center;
        .topic-serial-number {
          font-size: 14px;
          margin-right: 2px;
        }
        .topic-text {
          outline: none;
        }
        .latex-span {
          margin-left: 6px;
        }
      }
      &:hover {
        background-color: #fafafa;
        .fold {
          color: #4c4c4c;
        }
        .ri-draggable {
          opacity: 1;
          pointer-events: all;
        }
      }
    }
    .node-element-child {
      overflow: hidden;
    }
  }
}
</style>
